<template>
  <div class="VideoPage">
    <NavBar></NavBar>
    <div class="content">
      <div class="content-left" :key="index" v-for="(item, index) in video">
        <div class="video-header">{{item.header}}</div>
        <div class="video-info">
          <iframe height="450px" width="600px" :src="item.url" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
        </div>
      </div>
      <HotList></HotList>
    </div>
  </div>
</template>

<script>
import NavBar from "../components/NavBar.vue";
// 热门组件
import HotList from "../components/HotList.vue";
export default {
  components: {
    NavBar,
    HotList,
  },
  data() {
    return {
      video: [{ header: "高等数学", url: "//player.bilibili.com/player.html?aid=48624233&bvid=BV1Eb411u7Fw&cid=122452656&page=1" }],
    };
  },
};
</script>

<style lang="scss" scoped>
.VideoPage {
  background: #f0f2f5;
  /* 取消横向滚动条 */
  overflow-x: hidden;
}

.content {
  display: flex;
  justify-content: center;
  margin: 23px 0 100px 0;
  font-size: 16px;
}

.content-left {
  width: 700px;
  margin-right: 23px;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}
.content-left:hover {
  box-shadow: 0 0 6px rgb(0 0 0 / 10%);
}
</style>
